<template>
  <BasicModal
    @register="register"
    title="编辑告警日程表"
    @ok="submit"
    :destroyOnClose="true"
    :minHeight="100"
    :body-style="{ marginLeft: '10px', marginRight: '10px' }"
  >
    <Form layout="vertical" :model="schedule" ref="formRef">
      <FormItem name="type">
        <Select class="w-full" v-model:value="schedule.type" :disabled="isDisable">
          <SelectOption value="ANY_TIME">始终启用</SelectOption>
          <SelectOption value="SPECIFIC_TIME">定时启用</SelectOption>
          <SelectOption value="CUSTOM">自定义启用</SelectOption>
        </Select>
      </FormItem>
      <FormItem name="timezone" label="时区" v-show="schedule.type != 'ANY_TIME'" required>
        <Select class="w-full" v-model:value="schedule.timezone" :disabled="isDisable">
          <SelectOption v-for="option in options" :key="option.value" :value="option.value">
            {{ option.label }}
          </SelectOption>
        </Select>
      </FormItem>
      <Row :gutter="20" v-show="schedule.type != 'ANY_TIME'">
        <Col span="12">
          <FormItem :name="['dynamicValue', 'sourceType']" label="动态源类型">
            <Select
              class="w-full"
              v-model:value="schedule.dynamicValue.sourceType"
              placeholder="动态源类型"
              :disabled="isDisable"
            >
              <SelectOption value="REPEATING">无动态值</SelectOption>
              <SelectOption value="CURRENT_TENANT">当前租户</SelectOption>
              <SelectOption value="CURRENT_CUSTOMER">当前客户</SelectOption>
              <SelectOption value="CURRENT_DEVICE">当前设备</SelectOption>
            </Select>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem :name="['dynamicValue', 'sourceAttribute']" label="属性源">
            <Input
              placeholder="属性源"
              v-model:value="schedule.dynamicValue.sourceAttribute"
              :disabled="isDisable"
            />
          </FormItem>
        </Col>
      </Row>
      <FormItem v-if="schedule.type === 'SPECIFIC_TIME'" name="daysOfWeek" label="天" required>
        <CheckboxGroup
          v-model:value="schedule.daysOfWeek"
          :options="checkBoxGroup"
          :disabled="isDisable"
        />
      </FormItem>
      <div
        v-if="schedule.type === 'SPECIFIC_TIME'"
        class="flex items-start flex-row justify-around"
      >
        <span class="min-h-32px flex items-center">时间</span>
        <span class="min-h-32px flex items-center">从</span>
        <FormItem name="startsOn" required>
          <TimePicker
            v-model:value="schedule.startsOn"
            valueFormat="HH:mm:ss"
            :disabled="isDisable"
          />
        </FormItem>
        <span class="min-h-32px flex items-center">到</span>
        <FormItem name="endsOn" required>
          <TimePicker
            v-model:value="schedule.endsOn"
            valueFormat="HH:mm:ss"
            :disabled="isDisable"
          />
        </FormItem>
      </div>
      <div
        class="flex items-start flex-row justify-around"
        v-for="(item, index) in schedule.items"
        :key="item.dayOfWeek"
        v-show="schedule.type === 'CUSTOM'"
      >
        <FormItem :name="['items', index, 'enabled']" class="!min-h-0">
          <Checkbox v-model:checked="item.enabled" :disabled="isDisable" />
        </FormItem>
        <span class="min-h-32px flex items-center">{{ weekdays[item.dayOfWeek - 1] }}</span>
        <span class="min-h-32px flex items-center">从</span>
        <FormItem :name="['items', index, 'startsOn']" required>
          <TimePicker v-model:value="item.startsOn" valueFormat="HH:mm:ss" :disabled="isDisable" />
        </FormItem>
        <span class="min-h-32px flex items-center">到</span>
        <FormItem :name="['items', index, 'endsOn']" :required="item.enabled">
          <TimePicker v-model:value="item.endsOn" valueFormat="HH:mm:ss" :disabled="isDisable" />
        </FormItem>
      </div>
    </Form>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import {
    Select,
    SelectOption,
    Input,
    CheckboxGroup,
    TimePicker,
    Checkbox,
    Form,
    FormItem,
    Row,
    Col,
  } from 'ant-design-vue';
  import { ref, watch } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import moment from 'moment-timezone';
  const emit = defineEmits(['get-data']);
  const props = defineProps({
    disable: { type: Boolean },
  });
  let formRef = ref<Recordable>({});
  let isDisable = ref<boolean>(false);
  let schedule = ref<Recordable>({
    type: 'ANY_TIME',
    timezone: 'Etc/GMT+8',
    daysOfWeek: [],
    items: [
      { enabled: false, dayOfWeek: 1, startsOn: 0, endsOn: 0 },
      { enabled: false, dayOfWeek: 2, startsOn: 0, endsOn: 0 },
      { enabled: false, dayOfWeek: 3, startsOn: 0, endsOn: 0 },
      { enabled: false, dayOfWeek: 4, startsOn: 0, endsOn: 0 },
      { enabled: false, dayOfWeek: 5, startsOn: 0, endsOn: 0 },
      { enabled: false, dayOfWeek: 6, startsOn: 0, endsOn: 0 },
      { enabled: false, dayOfWeek: 7, startsOn: 0, endsOn: 0 },
    ],
    dynamicValue: {
      sourceAttribute: null,
      sourceType: null,
    },
    startsOn: null,
    endsOn: null,
  });
  const { createMessage } = useMessage();
  watch(
    () => props.disable,
    (nVal) => {
      isDisable.value = nVal;
    },
    { immediate: true },
  );
  const allTimezones = moment.tz.names();
  const timezoneOptions = allTimezones.map((timezone) => {
    const offset = moment().tz(timezone).format('Z');
    const displayLabel = `${timezone} (UTC${offset})`;
    return { value: timezone, label: displayLabel };
  });
  const options = ref(timezoneOptions);
  const checkBoxGroup = ref([
    { label: '星期一', value: 1 },
    { label: '星期二', value: 2 },
    { label: '星期三', value: 3 },
    { label: '星期四', value: 4 },
    { label: '星期五', value: 5 },
    { label: '星期六', value: 6 },
    { label: '星期天', value: 7 },
  ]);
  let weekdays = ref(['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']);
  const [register, { closeModal }] = useModalInner((data) => {
    if (data) {
      Object.assign(schedule.value, data);
    }
    if (!schedule.value.dynamicValue) {
      schedule.value.dynamicValue = {
        sourceAttribute: null,
        sourceType: null,
      };
    }
  });
  async function submit() {
    await formRef.value.validate();

    let hasEmpty = false;
    if (schedule.value.type === 'SPECIFIC_TIME') {
      if (!schedule.value.endsOn || !schedule.value.startsOn) {
        hasEmpty = true;
        createMessage.error('时间不能为空');
        return;
      }
      if (schedule.value.daysOfWeek.length === 0) {
        hasEmpty = true;
        createMessage.error('天不能为空');
        return;
      }
    }
    if (schedule.value.type === 'CUSTOM') {
      schedule.value.items.map((item) => {
        if (item.enabled) {
          if (!item.endsOn || !item.startsOn) {
            hasEmpty = true;
            return;
          }
        }
      });
      let hasDay = schedule.value.items.some((item) => item.enabled);
      if (!hasDay) {
        hasEmpty = true;
        createMessage.error('天不能为空');
      }
    }
    if (hasEmpty) {
      createMessage.error('时间不能为空');
      return;
    }
    emit('get-data', schedule.value);

    schedule.value = {
      type: 'ANY_TIME',
      timezone: 'Etc/GMT+8',
      daysOfWeek: [],
      items: [
        { enabled: false, dayOfWeek: 1, startsOn: 0, endsOn: 0 },
        { enabled: false, dayOfWeek: 2, startsOn: 0, endsOn: 0 },
        { enabled: false, dayOfWeek: 3, startsOn: 0, endsOn: 0 },
        { enabled: false, dayOfWeek: 4, startsOn: 0, endsOn: 0 },
        { enabled: false, dayOfWeek: 5, startsOn: 0, endsOn: 0 },
        { enabled: false, dayOfWeek: 6, startsOn: 0, endsOn: 0 },
        { enabled: false, dayOfWeek: 7, startsOn: 0, endsOn: 0 },
      ],
      dynamicValue: {
        sourceAttribute: null,
        sourceType: null,
      },
      startsOn: null,
      endsOn: null,
    };
    closeModal();
  }
</script>
